<template>
  <div class="ph_home">
    <div class="ph_topbox">
      <label for="mephone">原手机号</label>
      <input type="text" placeholder readonly id="mephone" v-model="letphone" style="font-size:14px;">
    </div>
    <div class="ph_topyanzheng">
      <label for="phyanzheng">验证码</label>
      <input type="text" placeholder="请填写验证码" id="phyanzheng" v-model="letyzm" style="font-size:14px;">
      <router-link to @click.native="usedyzm" id="usedyz">获取验证码</router-link>
    </div>
    <div class="ph_bombox">
      <label for="newphone">新手机号</label>
      <input type="text" placeholder="请填写新手机号" id="newphone" v-model="newphone" style="font-size:14px;">
    </div>
    <div class="ph_bomsolid">
      <label for="newyzm">验证码</label>
      <input type="text" placeholder="请填写验证码" id="newyzm" v-model="newyzm" style="font-size:14px;">
      <router-link to @click.native="newbom" id="newyz">获取验证码</router-link>
    </div>
    <div class="ph_bombtn">
      <router-link to @click.native="bomtj()">提交</router-link>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      phone: "",
      letphone: "",
      letyzm: "",
      newphone: "",
      newyzm: ""
    };
  },
  mounted() {
    this.phone = this.$route.query.phone;
    console.log(this.phone);
    this.letphone = this.phone;
  },
  methods: {
    usedyzm() {
      console.log(2222);
      this.$http.get(this.APIURL_PREFIX + "/api/accounts/checkcode?username="+this.letphone+'&'+'random='+1).then(response => {
        console.log(response);
        if(response.data.code==0){
          layer.msg(response.data.msg)
          $("#usedyz").text("验证码已发送");
          $('#usedyz').css('color','green')
        }
      });
    },
    newbom(){
      if(this.newphone==''){
        layer.msg('请填写新的手机号')
      }else{
         this.$http.get(this.APIURL_PREFIX + "/api/accounts/checkcode?username="+this.letphone+'&'+'random='+1).then(response => {
        console.log(response);
        if(response.data.code==0){
          layer.msg(response.data.msg)
           $("#newyz").text("验证码已发送");
          $('#newyz').css('color','green')
        }
      });
         
      }
         
    },
    bomtj() {
      console.log(this.letphone,this.letyzm,this.newphone,this.newyzm);
        if(this.letyzm==''){
          layer.msg('请输入原手机号的验证码')
        }else if(this.newphone==''){
          layer.msg('请输入新的手机号')
        }else if(this.newyzm==''){
          layer.msg('请输入新手机号的验证码')
        }else{
           
          this.$http.put(this.APIURL_PREFIX + "/api/wap/updatePhone",$.param({phone:this.letphone,newPhone:this.newphone,verifycode1:this.letyzm,verifycode2:this.newyzm})).then(response => {
          console.log(response);
          layer.msg(response.data.msg)
          if(response.data.code==0){
             this.$route.push({path:'me_secure'})
          }
          })
        

        }
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/me_phonebianji.css";
</style>